<script setup>

import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {inject, onMounted, reactive, ref, toRaw, toRefs, unref} from "vue";
import ClassificationModel from "@/model/ClassificationModel.js";
import {Delete} from "@element-plus/icons-vue";
import ClassificationService from "@/service/impl/ClassificationService.js";
import dialogJson from "@/components/dialog/dialogJson.js";
import Dialog from "@/components/dialog/Dialog.vue";
import SentenceConfig from "@/components/language/SentenceConfig.vue";


const t = inject('$t')
const message = inject('message')
const data = dataJson()
const module = moduleJson()
const classificationModel = ref(new ClassificationModel())
const keywords = ref({
    id: null,
    classificationId: null,
    keyword: '',
    replies: ''
})
const pageTable = ref()
const testTrainingDialog = dialogJson()
const sentenceConfigDialog = dialogJson()


onMounted(() => {
    module.value.page = false
    module.value.init(ClassificationService.url.add, ClassificationService.url.edit,
        ClassificationService.url.del, null, null)
    module.value.operations.width = "200px"
    module.value.dialog.width = "40%"
    init()
})

const init = () => {
    module.value.dialog.show = false
    ClassificationService.list({}).then(res => {
        data.value.list = res.data
    })
}

const editOpen = (data, index, type) => {
    module.value.dialog.load = false
    const fun = {
        0: () => {
            classificationModel.value = new ClassificationModel()
        },
        1: () => {
            classificationModel.value = data
        }
    }
    fun[type]()
}

const editConfirm =(type) =>{
    const fun = {
        0 : (src) => {
            ClassificationService.add(classificationModel.value).then(res => {
                src()
            })
        },
        1 : (src) => {
            ClassificationService.edit(classificationModel.value).then(res => {
                src()
            })
        }
    }
    fun[type](init)

}

const delConfirm = (obj) => {
    ClassificationService.del(obj).then(res => {
        init()
    })
}

const addKeywords = () => {
    classificationModel.value.keywords.push(Object.assign({}, keywords.value))
}

const delKeywords = (idx) => {
    // js 数组通过下标删除
    classificationModel.value.keywords.splice(idx, 1)
}

const training = () => {
    sentenceConfigDialog.value.show = true
    sentenceConfigDialog.value.title = "设置参数"
    sentenceConfigDialog.value.width = "40%"
    sentenceConfigDialog.value.load = true
    ClassificationService.findConfig({}).then(res => {
        sentenceConfigDialog.value.load = false
        sentenceConfigDialog.value.data = res.data
    }).catch(e => {
        sentenceConfigDialog.value.load = false
    })
}
const onTraining = () => {
    let items = pageTable.value.$refs.table.getSelectionRows().map(item => item.id)
    if(!items || items < 1){
        message.warning("请选择要训练的样本")
        return
    }
    ClassificationService.classTraining({
        id : items,
        config: sentenceConfigDialog.value.data
    }).then(res => {
        sentenceConfigDialog.value.show = false
    })
}
const testTraining = () => {
    testTrainingDialog.value.title = '测试样本'
    testTrainingDialog.value.width = '40%'
    testTrainingDialog.value.show = true
    testTrainingDialog.value.data = {
        str : '',
        json : ''
    }
}
const onTest = () => {
    if(!testTrainingDialog.value.data?.str){
        return
    }
    testTrainingDialog.value.data.str = testTrainingDialog.value.data.str.trim()
    ClassificationService.testTraining(testTrainingDialog.value.data.str)
        .then(res => {
            testTrainingDialog.value.data.json = res.data
    })
}

</script>
<template>
    <Page
        @refresh="init"
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @del-confirm="delConfirm"
        ref="pageTable"
    >
        <template #table-left>
        </template>
        <template #operate-before>

        </template>
        <template #operate-after>
            <el-button type="primary" @click="training">训练样本</el-button>
            <el-button type="primary" @click="testTraining">测试样本</el-button>
        </template>
        <template #table-column>
            <el-table-column type="selection" width="55" />
            <el-table-column prop="className" :label="$t('classification.name')" width="150"/>
            <el-table-column prop="sentenceCount" :label="$t('classification.sampleNum')" width="100"/>
            <el-table-column :label="$t('classification.keywordDesc')" show-overflow-tooltip>
                <template #default="scope">
                    {{scope.row.keywords.map(item => item.keyword+"->"+item.replies).join('; ')}}
                </template>
            </el-table-column>
        </template>
        <template #after-table-event="row">
        </template>
        <template #table-dialog>
            <el-form :rules="classificationModel.rules" :label-width="100" :label-position="'left'" :model="classificationModel" style="width: 100%;padding: 5px">
                <el-form-item :label="$t('classification.name')" prop="className">
                    <el-input v-model="classificationModel.className" autocomplete="off"/>
                </el-form-item>
                <el-form-item >
                    <el-row><el-button type="primary" @click="addKeywords">添加关键词</el-button></el-row>
                    <template v-for="(item,idx) in classificationModel.keywords">
                        <el-row style="margin-top: 15px;width: 100%">
                            <el-col :span="2">{{$t('classification.keyword')}}</el-col>
                            <el-col :span="5"><el-input v-model="item.keyword" autocomplete="off"/></el-col>
                            <el-col :span="1"></el-col>
                            <el-col :span="3">{{$t('classification.replies')}}</el-col>
                            <el-col :span="11"><el-input v-model="item.replies" autocomplete="off"/></el-col>
                            <el-col :span="2" style="text-align: center"><el-button type="danger" :icon="Delete" circle @click="delKeywords(idx)" /></el-col>
                        </el-row>
                    </template>
                </el-form-item>
            </el-form>
        </template>
        <template #table-search>

        </template>
    </Page>
    <Dialog :dialog="testTrainingDialog" >
        <el-row class="test-training">
            <el-row class="test-training-top">
                <pre>{{testTrainingDialog.data.json}}</pre>
            </el-row>
            <el-row class="test-training-bottom">
                <el-input
                    v-model="testTrainingDialog.data.str"
                    style="width: 100%;height: 100%"
                    resize="none"
                    type="textarea"
                    placeholder="请输入内容"
                />
            </el-row>
        </el-row>
        <template #table-dialog-btn>
            <el-button type="primary" @click="onTest">测试</el-button>
        </template>
    </Dialog>

    <SentenceConfig :sentence-config-dialog="sentenceConfigDialog" @on-training="onTraining" />

</template>

<style lang="scss" scoped>
.test-training{
    height: 300px;
    width: 100%;
}
.test-training-top{
    height: 240px;
    width: 100%;
    overflow-y: auto;
}
.test-training-bottom{
    width: 100%;
    height: auto;
}
</style>
